<script setup>
import {ref,reactive} from "vue"


</script>
<template>
  <div class="jc-swiper-one">
    <div class="jc-swiper-one-content jc-center-width">
        <div class="jc-swiper-content-utils">
            <div class="jc-m-b-48">
                <div class="banner-title">
                    <h1 class="title">探索体验</h1>
                </div>
                <div class="banner-title flex-title">
                    <div class="title">设计未来</div>
                    <div class="fix jc-m-l-10"></div>
                </div>
            </div>
            <div class="banner-desc jc-m-b-88">
                <p>致力于提升产品体验,追求极致化的用户使用体验,</p>
                <br>
                <p>探索数字化生态体验创新。</p>
            </div>
            <div class="banner-btn"> 
                <span>关于JCMY</span>
                <span class="jc-m-l-24 jc-btn">
                    <i class="iconfont icon-bofang"></i>
                </span>
            </div>
        </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.jc-swiper-one {
    width: 100%;
    height: 100vh;
    background: url(https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/info-right@2x.11bf71dc.png) #e40001 no-repeat 80%/contain;
    background-color: var(--jc-color-primary);
    .jc-swiper-one-content {
        margin: 0 auto;
        display: flex;
        align-items: center;
        height: 100%;
        color: var(--jc-color-text-primary);
        .jc-swiper-content-utils {
            user-select: none;
            .banner-title {
                .title {
                    line-height: 58px;
                    font-size: 48px;
                    letter-spacing: 5px;
                    font-weight: bold;
                }
                .fix{
                    background-color: var(--jc-color-text-primary);
                    width: 32px;
                    height: 12px;
                }
            }
            .flex-title {
                display: flex;
                align-items: center;
            }
            .banner-desc {
                font-weight: 200;
                font-size: 16px;
                letter-spacing: 1px;
                opacity: .8;
            }
        }
        .banner-btn {
            display: flex;
            align-items: center;
        }
        .jc-btn {
            width: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0px 14px;
            padding-bottom: 2px;
            border-radius: 22px;
            font-size: 14px;
            border: 1px solid var(--jc-color-text-primary);
            letter-spacing: 1px;
            cursor: pointer;
            transition: .3s all ease;
            height: 22px;
            .icon-bofang {
                font-size: 12px;
                color: var(--jc-color-text-primary);
            }
            &:hover {
                background-color: var(--jc-color-text-primary);
            }
            &:hover .icon-bofang {
                color: var(--jc-color-primary);
            }
        }
    }
}
</style>
